import ActionGroup from "./ActionGroup.vue"
import moment from 'moment'
/**
 * tooltip {boolean}  
 */
const columns = (showOperate) => {
  let arr = [
    // {
    //   type: 'selection',
    //   width: 55
    // },
    {
      label: 'Camera ID',
      prop: 'serialnumber',
      width: 170,
      tooltip: true,
    },
    {
      label: 'Camera Name',
      prop: 'name',
      width: 150,
      tooltip: false,
    },
    {
      label: 'City',
      prop: 'cityName',
      // width: 120,
      tooltip: false,
    },
    // {
    //   label: 'Device Type',
    //   prop: 'devicetypeName',
    //   width: 110,
    //   tooltip: false,
    // },
    // {
    //   label: 'Model',
    //   prop: 'model',
    //   width: 100,
    //   tooltip: false,
    // },
    {
      label: 'Bind Vehicle',
      prop: 'vehicle',
      width: 110,
      tooltip: false,
    },
    // {
    //   label: 'Resolution Ratio',
    //   prop: 'resolutionrateName',
    //   width: 128,
    //   tooltip: false,
    // },
    // {
    //   label: 'Pixel',
    //   prop: 'pixelName',
    //   width: 80,
    //   tooltip: false,
    // },
    {
      label: 'Algorithm',
      prop: 'algorithmName',
      minWidth: 120,
      tooltip: true,
      // formatter: (row, column, cellValue, index) => {
      //   return <div>{
      //     row.algorithmName?.split(",").map(i => {
      //       return <div>{i}</div>
      //     })
      //   }</div>
      // }
    },
    {
      label: 'Package Version',
      prop: 'version',
      width: 160,
      tooltip: false,
      formatter: (row, column, cellValue, index) => {
        return <div>
          <div>Software - {row.version ? row.version : '' }</div>
          <div>Algorithm - {row.hilensVersion ? row.hilensVersion : '' }</div>
        </div>
      }
    },
    // {
    //   label: 'IP',
    //   prop: 'ip',
    //   width: 130,
    //   tooltip: false,
    // },
    // {
    //   label: 'RTMP Stream Address',
    //   prop: 'rtmpurl',
    //   width: 180,
    //   tooltip: false,
    // },
    // {
    //   label: 'OBS Address',
    //   prop: 'obsurl',
    //   minWidth: 120,
    //   tooltip: false,
    // },
    {
      label: 'Position',
      prop: 'position',
      minWidth: 80,
      tooltip: false,
    },
    {
      label: 'State',
      prop: 'status',
      width: 80,
      tooltip: false,
      formatter: (row, column, cellValue, index) => {
        return <div>{
          row.status == 1 ? <div style="color:#3A4EFC">online</div> : <div style={{ color: 'var(--mw-not-important-off-color)' }}>offline</div>
        }</div>
      }
    },
    {
      label: 'OTA State',
      prop: 'cameraUpgradeStatus',
      width: 160,
      tooltip: false,
      formatter: (row, column, cellValue, index) => {
        return row.cameraUpgradeStatus
      }
    },
    {
      label: 'Last online time',
      prop: 'updateTime',
      width: 160,
      tooltip: false,
      formatter: (row, column, cellValue, index) => {
        return <div>
          {row.updateTime ? moment(row.updateTime).format('yyyy-MM-DD HH:mm:ss') : ''}
        </div>
      }
    },
    {
      label: 'Creator',
      prop: 'createName',
      width: 100,
      tooltip: false
    }
  ]
  if (showOperate) {
    arr.push({
      label: "Operate",
      width: 420,
      render: ActionGroup
    })
  }
  return arr;
};
export default columns;